<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>添加操作员</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" />
</head>
<body style="height: 600px;overflow: hidden;">
<div style="margin:4% 30%;height: 600px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">员工编号</label>
            <div class="layui-input-block">
                <input type="text" name="lname" id="name" required  lay-verify="required" placeholder="请输入员工编号" autocomplete="off" class="layui-input">
                <span id="ok" style="display: none;color: green">该用户编码可以用</span>
                <span id="no" style="display: none;color: red">该用户编码不可用</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名</label>
            <div class="layui-input-block">
                <input type="text" name="lname" required  lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="lpwd" style="width:430px;" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="radio" name="lpower" value="0" title="操作员" checked>
                <input type="radio" name="lpower" value="1" title="管理员">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态-默认开</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="lstate" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="login">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    //Demo
    layui.use(['form','jquery'], function(){
        var form = layui.form,
        $=layui.jquery,
        layer=layui.layer;
        var code;
        //员工编号---失去焦点事件
        $('#lname').blur(function(){
            var name=document.getElementById('name').value;
            if(name==''|| name==undefined){
                return;
            }
            $.ajax({
                type:'GET',
                url:'',//地址
                data:{
                    lname:name
                },
                datatype:'JSON',
                success:function(data){
                    if(data.code=='200'){
                        document.getElementById('ok').style.display='inline-block';
                        code=200;
                    }else{
                        document.getElementById('no').style.display='inline-block';
                        code=400;
                    }
                },
                error:function(){
                    layer.msg('出现了错误，请重试!');
                }
            })
        });
        //监听提交
        form.on('submit(login)', function(data){
            //alert(data.filed.lname);
            if(code=='200'){
                $.ajax({
                    type:'GET',
                    url:'',
                    data:{
                        lname:data.filed.lname,
                        lpwd:data.filed.lpwd,
                        lpower:data.filed.lpower,
                        lstate:this.checked ? '0' : '1'
                    },
                    datatype:'JSON',
                    success:function(data){
                        if(data.code=='200'){
                            layer.msg('操作成功');
                            window.history.go(-1);
                        }else{
                            layer.msg('出现了错误,请重试!');
                            window.history.go(-1);
                        }
                    }
                })
            }else{
                layer.msg('员工编号不能使用');
                return;
            }
            //layer.msg(JSON.stringify(data.field));
            return false;
        });
        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });
    });
</script>

</body>
</html>
